<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成易博客-注册</title>
    <link rel="stylesheet" href="static/css/cinui.css"/>
    <link rel="stylesheet" href="static/layui-v2.6.8/layui/css/layui.css" media="all">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="static/layui-v2.6.8/layui/layui.js" charset="utf-8"></script>
    <script src="static/js/jquery-3.6.js"></script>
    <!--  图标库  -->
    <link href="static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

</head>
<body style="background: rgb(246,248,244)">
<!--头 -->
<div class="layui-col-lg4 layui-col-md6 layui-col-sm10 layui-col-xs10 layui-col-lg-offset4 layui-col-md-offset3 layui-col-sm-offset1 layui-col-xs-offset1 formClass"
     style="margin-top: 5%;background: white">
    <form class="layui-form layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 layui-col-lg-offset3 layui-col-md-offset1  layui-col-sm-offset2"
          action="user/register" method="post" name="form1" style="padding-top: 5%;">
        <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
            <label class="layui-form-label"><span class="layui-icon layui-icon-username"></span></label>
            <div class="layui-input-inline">
                <input type="text" id="userName" name="userName" required lay-verify="required" placeholder="用户名"
                       autocomplete="off"
                       class="layui-input layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12" onblur="a()">
            </div>
            <div class="layui-form-mid layui-word-aux" id="info1"></div>
        </div>
        <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
            <label class="layui-form-label"><span class="layui-icon layui-icon-password"></span></label>
            <div class="layui-input-inline">
                <input type="password" id="userPwd" name="userPwd" required lay-verify="required" placeholder="密码" autocomplete="off"
                       class="layui-input layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12" onblur="yzPassword()">
            </div>
            <div class="layui-form-mid layui-word-aux" id="info4"></div>
        </div>
        <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
            <label class="layui-form-label"><span class="layui-icon layui-icon-cellphone"></span></label>
            <div class="layui-input-inline">
                <input type="text" id="userPhone" name="userPhone" required phone lay-verify="required|phone"
                       placeholder="手机号" minlength="11" maxlength="11" autocomplete="off"
                       class="layui-input layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12" onblur="c()">
            </div>
            <div class="layui-word-aux cinUiInline" id="info2"></div>
        </div>
        <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-disabled layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12"
                        onclick="getCode()" id="Code" disabled="disabled">获取验证码
                </button>
            </div>
        </div>

        <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
            <label class="layui-form-label"><span class="layui-icon layui-icon-vercode"></span></label>
            <div class="layui-input-inline">
                <input type="text" id="SmsCode" name="SmsCode" required lay-verify="required" placeholder="验证码"
                       autocomplete="off"
                       class="layui-input layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12"
                       onblur="codeStatus()">
            </div>
            <div class="layui-form-mid layui-word-aux" id="info3"></div>
        </div>
        <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <label class="layui-form-label"><span class="fa fa-eercast"></span></label>
            <div class="layui-input-block">
                <input type="radio" name="userSex" value="男" title="男" checked>
                <input type="radio" name="userSex" value="女" title="女">
            </div>
        </div>
        <div class="layui-form-item layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs10">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-disabled layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12"
                        id="submit" lay-submit lay-filter="formDemo" disabled="disabled">注册
                </button>
            </div>
        </div>
    </form>
</div>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        //监听提交  获取表单json数据

        form.on('submit(formDemo)', function (data) {
            layui.alert('注册成功，即将前往登陆界面！',{icon:6});
            return true;
        });
    });
</script>
<script type="text/javascript">

    let flagUserName;//用户名
    let flagUserPwd;//密码
    let flagUserPhone;//手机号
    let flagSmsCode;//验证码

    var code = document.getElementById("Code");
    var submit = document.getElementById("submit");//获取注册按钮的id
    function a() {
        if($('#userName').val().length < 6){
            layer.msg('用户名长度不能低于6位', {icon: 5});
        }else{
            $.post({
                url: "user/userNameTest",//后台接口
                data: {
                    "userName": $("#userName").val()
                },//传给后台
                async: true,
                success: function (data) {//传值成功 获取返回值
                    //将返回值绑定到div上
                    $("#info1").html(data);
                    var infoFont1 = document.getElementById("info1");


                        if (data.toString() === "已被注册") {//js判断 是否可以注册  改变class属性中的样式  实现禁用和启用注册按钮
                            flagUserName = false;
                            infoFont1.setAttribute('class', 'infoFont layui-form-mid fa fa-close');
                            code.setAttribute('class', 'layui-btn layui-btn-primary submitStyleButton layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12');
                        } else {
                            flagUserName = true;
                            yz()
                            infoFont1.setAttribute('class', 'layui-form-mid layui-word-aux fa fa-check infoFontO');
                        }


                }
            })
        }
    }


    function yzPassword(){
        if ($('#userPwd').val().length < 8){
            layer.msg('密码长度不能小于8位', {icon: 5});
            flagUserPwd = false;
        }else {
            flagUserPwd = true;
        }
    }

    //判断是否输入11位数
    //判断是否手机号被注册

    function c() {
        var phoneLength = document.getElementById("userPhone");
        if (phoneLength.value.length == 11) {


            //将发送验证码按钮设置为可点击
            let Code = document.getElementById('Code');
            Code.disabled=false;
            Code.setAttribute('class', 'submitStyleButtonYes layui-btn layui-btn-normal layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12');


            //判断是否是正确的手机号码(待执行)


            //请求
            $.post({
                url: "user/userPhoneTest",//后台接口
                data: {
                    "userPhone": $("#userPhone").val()
                },//传给后台
                async: true,
                success: function (data) {//传值成功 获取返回值
                    //将返回值绑定到div上
                    $("#info2").html(data);

                    var infoFont2 = document.getElementById("info2");
                    var info1 = document.getElementById("info1");

                        if (data.toString() === "已被注册") {//js判断 是否可以注册  改变class属性中的样式  实现禁用和启用注册按钮
                            flagUserPhone = false;
                            infoFont2.setAttribute('class', 'infoFont layui-form-mid fa fa-close');
                        } else {
                            flagUserPhone = true;
                            yz()
                            code.setAttribute('class', 'layui-btn layui-btn-normal layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12');
                            infoFont2.setAttribute('class', ' layui-form-mid layui-word-aux fa fa-check infoFontO');
                        }
                }
            })
        } else {
            code.setAttribute('class', 'layui-btn layui-btn-primary submitStyleButton layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12');
        }

    }

    //验证码发送
    function getCode() {
        var info2 = document.getElementById("info2");
        $.post({
            url: "user/getCode",
            data: {"userPhone": $('#userPhone').val()},
            async: true,
            success: function (data) {
                $('#info2').html(data);//获取后台数据绑定到 div上
                var Code = document.getElementById("Code");//获取注册按钮的id
                if (data.toString() === '发送成功') {//如果验证码发送成功，则将按钮设置为不可点击
                    info2.setAttribute('class','layui-form-mid fa fa-check')
                    Code.setAttribute('class', 'layui-btn layui-btn-primary submitStyleButton layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12');
                } else if(data.toString() === '一个小时发送次数不能超过三次'){
                    info2.setAttribute('class','infoFont layui-form-mid fa fa-close')
                    Code.setAttribute('class', 'layui-btn layui-btn-normal layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 infoFontO');
                } else {
                    info2.setAttribute('class','infoFont layui-form-mid fa fa-close')
                    Code.setAttribute('class', 'layui-btn layui-btn-normal layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12 infoFontO');
                }
            }
        })
    }

    //验证码验证
    function codeStatus() {
        var info3 = document.getElementById("info3");
            if ($('#SmsCode').val().length > 0){
                $.post({
                    url: "user/codeStatus",
                    data: {
                        "userPhone": $('#userPhone').val(),
                        "SmsCode": $('#SmsCode').val()},
                    async: true,
                    success: function (data) {
                        $('#info3').html(data);//获取后台数据绑定到 div
                        var codeStatus = document.getElementById("SmsCode");


                        if (data.toString() === '您的验证码错误或已失效') {//验证码错误不允许注册
                            flagSmsCode = false;
                            info3.setAttribute('class','infoFont layui-form-mid fa fa-close')
                        } else {
                            flagSmsCode = true;
                            yz()
                            info3.setAttribute('class','layui-form-mid fa fa-check infoFontO')
                        }

                    }
                })
            }else{
                layer.msg('验证码不能为空', {icon: 5});
            }


    }


    function yz() {
        //三项都判true时，注册才可提交
        if (flagUserName === true && flagUserPhone === true && flagSmsCode ===true && flagUserPwd){
            submit.disabled=false;
            submit.setAttribute('class', 'submitStyleButtonYes layui-btn layui-btn-normal layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12');
        }
    }


</script>
</body>
</html>